<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="renderer" content="webkit" />
  <meta name="force-rendering" content="webkit" />
  <title>Interactive Circular Menu</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      margin-top: 100px;
      background-color: #e8e8e8;
    }
    footer.demo {
      position: absolute;
      bottom: 10px;
      width: 500px;
      margin: 0 auto;
    }
    footer.demo a {
      text-align: center;
      color: #000;
      text-decoration: none;
      font-weight: 100;
      border-bottom: 1px solid #000;
    }
    .wrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60px;
      height: 60px;
    }
    .circle {
      display: block;
      position: relative;
      padding: 0;
      z-index: 98;
      margin: 0 auto;
      -webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
      box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
      border-radius: 50%;
      height: 60px;
      width: 60px;
      background-color: #083ea5;
      transition: 0.2s;
      text-align: center;
    }
    .circle:active {
      transform: scale(0.9);
      box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.3);
    }
    .circle:hover {
      cursor: pointer;
      background-color: #1356d5;
      box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.3);
    }
    .circle svg {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -15px;
      margin-top: -15px;
      width: 30px;
      height: 30px;
      transition: 0.5s;
      transform: rotate(180deg);
    }
    .sub-circle {
      z-index: 0;
      position: absolute;
      height: 40px;
      width: 40px;
      overflow: hidden;
      border-radius: 50%;
      transition: 0.3s;
      transform: scale(0.5);
      opacity: 0;
      padding: 0;
      margin: 0;
      box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
      border: none;
    }
    .sub-circle label {
      background-color: #F50057;
      display: block;
      color: white;
      width: 100%;
      height: 100%;
      line-height: 40px;
      transition: 0.5s;
    }
    .sub-circle label:hover {
      cursor: pointer;
      background-color: #606fc7;
    }
    .subs {
      left: -20px;
      top: -50px;
      width: 40px;
      height: 40px;
      text-align: center;
      z-index: 0;
      margin: 0 auto;
      position: relative;
    }
    .hidden-sub-trigger {
      display: none;
    }
    .hidden-sub-trigger:checked ~ label {
      background-color: #606fc7;
    }
    .hidden-trigger {
      display: none;
    }
    .hidden-trigger:checked ~ .circle {
      transform: scale(0.9);
      cursor: pointer;
      background-color: #1356d5;
      box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.1);
    }
    .hidden-trigger:checked ~ .circle svg {
      transform: rotate(45deg);
    }
    .hidden-trigger:checked ~ .subs button:nth-of-type(1) {
      transform: translate(0px, -100px) scale(1);
      opacity: 1;
      transition: 0.1s;
    }
    .hidden-trigger:checked ~ .subs button:nth-of-type(2) {
      transform: translate(75px, -75px) scale(1);
      opacity: 1;
      transition: 0.2s;
    }
    .hidden-trigger:checked ~ .subs button:nth-of-type(3) {
      transform: translate(100px, 0px) scale(1);
      opacity: 1;
      transition: 0.3s;
    }
    .hidden-trigger:checked ~ .subs button:nth-of-type(4) {
      transform: translate(75px, 75px) scale(1);
      opacity: 1;
      transition: 0.4s;
    }
    .hidden-trigger:checked ~ .subs button:nth-of-type(5) {
      transform: translate(0px, 100px) scale(1);
      opacity: 1;
      transition: 0.5s;
    }
    .hidden-trigger:checked ~ .subs button:nth-of-type(6) {
      transform: translate(-75px, 75px) scale(1);
      opacity: 1;
      transition: 0.6s;
    }
    .hidden-trigger:checked ~ .subs button:nth-of-type(7) {
      transform: translate(-100px, 0px) scale(1);
      opacity: 1;
      transition: 0.7s;
    }
    .hidden-trigger:checked ~ .subs button:nth-of-type(8) {
      transform: translate(-75px, -75px) scale(1);
      opacity: 1;
      transition: 0.8s;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <input class="hidden-trigger" id="toogle" type="checkbox">
    <label class="circle" for="toogle">
      <svg viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg">
        <image xlink:href="" height="48" width="48"></image>
      </svg>
    </label>
    <div class="subs">
      <button class="sub-circle">
        <input class="hidden-sub-trigger" id="sub1" type="radio" name="sub-circle" value="1">
        <label for="sub1">1</label>
      </button>
      <button class="sub-circle">
        <input class="hidden-sub-trigger" id="sub2" type="radio" name="sub-circle" value="1">
        <label for="sub2">2</label>
      </button>
      <button class="sub-circle">
        <input class="hidden-sub-trigger" id="sub3" type="radio" name="sub-circle" value="1">
        <label for="sub3">3</label>
      </button>
      <button class="sub-circle">
        <input class="hidden-sub-trigger" id="sub4" type="radio" name="sub-circle" value="1">
        <label for="sub4">4</label>
      </button>
      <button class="sub-circle">
        <input class="hidden-sub-trigger" id="sub5" type="radio" name="sub-circle" value="1">
        <label for="sub5">5</label>
      </button>
      <button class="sub-circle">
        <input class="hidden-sub-trigger" id="sub6" type="radio" name="sub-circle" value="1">
        <label for="sub6">6</label>
      </button>
      <button class="sub-circle">
        <input class="hidden-sub-trigger" id="sub7" type="radio" name="sub-circle" value="1">
        <label for="sub7">7</label>
      </button>
      <button class="sub-circle">
        <input class="hidden-sub-trigger" id="sub8" type="radio" name="sub-circle" value="1">
        <label for="sub8">8</label>
      </button>
    </div>
  </div>
</body>
</html>
